<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相关元素</title>
</head>

<body>

    <div class="items">
        <div class="tiem tiem1">item1</div>
        <div class="tiem tiem2">item2</div>
        <div class="tiem tiem3">item3</div>
        <div class="tiem tiem4">item4</div>
        <div class="tiem tiem5">item5</div>
    </div>

    
    <script>
        let items = document.querySelector(".items")    // querySelector  找到第一个元素
        console.log(items.length);      //  所以长度为空


        // 子元素
        console.log(items.children);        //  所有子元素
        console.log(items.children[0]);       //  第一个子元素
        console.log(items.children[items.children.length - 1]);       //  最后一个子元素
        console.log(items.firstElementChild);       //  第一个子元素
        console.log(items.lastElementChild);        //  最后一个子元素


        // 父元素
        console.log(items.children[2].parentElement);       //  指定子元素的父元素


        // 兄弟元素
        console.log(items.children[2].previousElementSibling);  //  上边的一个兄弟元素
        console.log(items.children[2].nextElementSibling);  //  下边的一个兄弟元素
        console.log(items.previousElementSibling);  //  null
    </script>





</body>
</html>